<template>
<div style="width:500px;margin: 0 auto;text-align: center;">
    <div class="title-row">
        <img src="../../../assets/images/wx.jpg" width="60px">
        <span>微信支付</span>
    </div>
    
    <qrcode-vue  :value="url" :size="size"></qrcode-vue>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'
export default {
    name:'ShowCode',
    components:{QrcodeVue},
    mounted(){
        this.startTimer();
    },
    data:function(){
        return{
            url:this.$route.query.url,
            size:200,
            timerId:''
        }
    },
    methods:{
        //轮询

        startTimer(){
            this.timerId = setInterval(()=>{
                this.queryStatus(this.$route.query.outTradeNo);
            },5000);
        },
        //查询支付状态
        queryStatus(outTradeNo){
            if(this.$route.path!='/show-code'){
                return ;
            }
            console.log('定时器执行中！');
            this.$axios({
                url:'/easybuy/order/getone',
                params:{
                    outTradeNo
                }
            }).then(rs=>{
                if(rs.data.ispay == 1){
                    this.$message.success('支付成功！');
                    this.$router.replace('/goodslist');
                    clearInterval(this.timerId);
                }else if(rs.data.ispay == 2){
                    this.$message.error('订单已超时！');
                    this.$router.replace('/goodslist');
                    clearInterval(this.timerId);
                }
            })
        }
        
    }
}
</script>

<style scoped>
.title-row {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin-bottom: 16px;
}

</style>